<template>
          <div class="payType2 theme_color" @click="openScan">
              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                y="0px" viewBox="0 0 58.4 57.1" style="enable-background:new 0 0 58.4 57.1;" xml:space="preserve">
                <path class="st1" d="M45.8,0.3h-7.2c-1.4,0-2.5,1.1-2.5,2.5s1.1,2.5,2.5,2.5h7.2c3.9,0,7,3.2,7,7v4.9c0,1.4,1.1,2.5,2.5,2.5
	s2.5-1.1,2.5-2.5v-4.9C57.9,5.7,52.5,0.3,45.8,0.3z" />
                <path class="st1" d="M55.4,37.1c-1.4,0-2.5,1.1-2.5,2.5v4.9c0,3.9-3.2,7-7,7h-7.2c-1.4,0-2.5,1.1-2.5,2.5s1.1,2.5,2.5,2.5h7.2
	c6.6,0,12-5.4,12-12v-4.9C57.9,38.2,56.7,37.1,55.4,37.1z" />
                <path class="st1" d="M20.1,51.5h-7.7c-3.9,0-7-3.2-7-7v-4.9c0-1.4-1.1-2.5-2.5-2.5s-2.5,1.1-2.5,2.5v4.9c0,6.6,5.4,12,12,12h7.7
	c1.4,0,2.5-1.1,2.5-2.5S21.5,51.5,20.1,51.5z" />
                <path class="st1" d="M2.9,19.7c1.4,0,2.5-1.1,2.5-2.5v-4.9c0-3.9,3.2-7,7-7h7.7c1.4,0,2.5-1.1,2.5-2.5s-1.1-2.5-2.5-2.5h-7.7
	c-6.6,0-12,5.4-12,12v4.9C0.4,18.5,1.5,19.7,2.9,19.7z" />
                <g>
                  <circle class="st1" cx="29.2" cy="30" r="4.7" />
                  <path class="st1" d="M40,19.3h-2.3l-0.8-2.6c-0.3-1.1-1.3-1.8-2.5-1.8H24.1c-1.1,0-2.1,0.7-2.5,1.8l-0.8,2.6h-2.3
		c-2.3,0-4.1,1.8-4.1,4.1v14.8c0,2.3,1.8,4.1,4.1,4.1H40c2.3,0,4.1-1.8,4.1-4.1V23.4C44.1,21.1,42.2,19.3,40,19.3z M29.2,37.9
		c-4.3,0-7.8-3.5-7.8-7.8s3.5-7.8,7.8-7.8s7.8,3.5,7.8,7.8S33.6,37.9,29.2,37.9z" />
                </g>
              </svg>
            </div>
            <div class="qr_warp" v-if="startScan">
    <van-icon class="icon_back" @click="startScan = false" name="arrow-left" />
    <qr-stream ref="qrs" @decode="onDecode" class="mb">
      <div style="color: red;" class="frame"></div>
    </qr-stream>
  </div>
</template>
<script setup>
import { QrStream } from 'vue3-qr-reader'
import { showToast } from "vant";
import { useStore } from "vuex";
import { ref, reactive, onMounted, computed } from "vue";
import { useI18n } from "vue-i18n";
import { getUrlParam, checkUrl, getAudioVideo } from '@/utils/index.js'
import { useRouter } from "vue-router";
const { locale, t } = useI18n();
const router = useRouter();
const store = useStore();
const emit = defineEmits(["change"]);
const props = defineProps({
  title: {
    type: [String, Number],
    default: '',
  },
  value: {
    type: [String, Number],
    default: '',
  },
  recordItem:{
    type:[Object],
    default:()=>{
      return {}
    }
  }
})
const startScan = ref(false)
const openScan = () => {
  getAudioVideo({ video: true }).then(res => {
    startScan.value = true
  }).catch(err => {
    showToast(t('请检查是否存在摄像头或麦克风'))
    if (err.code && err.code == 404) {
      console.log('浏览器不支持，请更换浏览器')
    } else {
      startScan.value = true
      setTimeout(() => {
        startScan.value = false
      }, 10 * 1000)
      console.log('请检查是否存在摄像头或麦克风')
    }
  })
}
const onDecode = (data) => {
  if (data) {
      emit('change',data)
      startScan.value = false
  } else {
    showToast(t('请扫描正确的二维码'));
  }
}
const loading = ref(false)
const goToPage = (value) => {
  router.push({
    name: value
  })
}
</script>
<style lang="scss" scoped>

.payType2 {
      display: flex;
      align-items: center;

      img {
        height: 16px;
        width: 16px;
        margin-left: 0.26667rem;
      }

      svg {
        height: 16px;
        width: 16px;
        margin-left: 0.26667rem;
      }

      .van-icon {
        margin-left: 0.26667rem;
        color: $primary-color;
        font-size: 16px;
      }
    }
    .qr_warp {
  height: 100vh;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 9;

  .icon_back {
    position: absolute;
    z-index: 50;
    left: 10px;
    top: 10px;
    color: #fff;
    font-size: 20px;
  }
}
</style>
  